<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <script src="/jquery-3.2.1.min.js"></script>
    <script src="/vue.js"></script>
    <script src="/elementUI/elementUI.js"></script>
    <script src="/common.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/jquerySticky/sticky.js"></script>
    <link rel="stylesheet" href="/common.css"/>
    <link rel="stylesheet" href="/elementUI/elementUI.css"/>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .header {
            padding: 10px;
            background: #bfd6ee;
            box-shadow: 2px 2px 5px gray;
            margin-bottom: 2px;
        }
        .upload-demo .el-upload-list{
            overflow: auto;
            height: 500px;
            width: 500px;
        }
        .el-button--mini{
            padding: 2px 8px;
        }
        .is-sticky{
            z-index: 9999;
            position: relative;
        }
    </style>
</head>
<body>

<form action="" id="fileForm" method="post" style="display: none;">
    <input type="text" name="path" value="">
</form>
<div id="home" class="funnyftpcontainer" style="box-sizing: border-box;">
    <div v-if="toUpload" style="position: fixed;z-index:99999999;width: 100vw;height: 100vh;background: rgba(220,220,220,0.23);display: flex;justify-content: center;align-items: center;">
        <div style="padding: 10px;border-radius: 5px;box-shadow: 0px 0px 5px 5px green;background: #fff;">
            <div style="display: flex;justify-content: flex-end;padding-bottom: 10px;">
                <el-button type="danger" @click="toUpload=false" icon="el-icon-close" size="mini" plain circle></el-button>
            </div>
            <el-upload
                    multiple
                    class="upload-demo"
                    ref="upload"
                    action="/file/upload"
                    :data="{path:relativePath}"
                    :on-success="handleSuccess"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="upFileList"
                    :auto-upload="false">
                <div>
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </div>
                <div slot="tip" class="el-upload__tip">上传同名文件将会被覆盖</div>
            </el-upload>
        </div>
    </div>

    <div class="header">
        <div>
            <span>当前相对路径:</span><strong>{{relativePath}}</strong>
        </div>
        <div style="padding: 5px;"></div>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-button @click="into(backPath)" type="success" size="mini" plain>返回上一级</el-button>
                <el-button @click="into(relativePath)" type="primary" size="mini" plain>刷新</el-button>
            </el-col>
            <el-col :span="6" :offset="14">
                <el-button type="primary" size="mini" plain @click="toUpload=true">上传文件</el-button>
                <el-button type="success" size="mini" @click="newPackage" plain>新建文件夹</el-button>
            </el-col>
        </el-row>
    </div>

    <div class="fileLists">
        <el-table :data="fileList" :cell-style="iCellStyle" style="width: 100%">
            <el-table-column prop="type" sortable label="类型" width="80">
                <template slot-scope="scope">
                    <el-image style="width: 20px; height: 20px" :src="'/img/' + scope.row.icon" fit="fill"></el-image>
<#--                    <el-image style="width: 20px; height: 20px" :src="/img/未知文件.svg" fit="fill" v-if="scope.row.type==='file'"></el-image>-->
                </template>
            </el-table-column>
            <el-table-column sortable="true" prop="simpleName" label="文件或目录名">
                <template slot-scope="scope">
                    <el-link type="_blank" @click="into(scope.row.path)" v-if="scope.row.type==='dir'">{{ scope.row.simpleName }}</el-link>
                    <a v-if="scope.row.type==='file'">{{ scope.row.simpleName }}</a>
                </template>
            </el-table-column>
            <el-table-column sortable prop="info" label="描述"></el-table-column>
            <el-table-column sortable prop="readableSize" label="大小" width="150"></el-table-column>
            <el-table-column sortable prop="lastModified" label="创建时间" width="160"></el-table-column>

            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" plain type="primary" v-if="scope.row.type==='dir'" @click="into(scope.row.path)">进入</el-button>
                    <el-button size="mini" plain type="danger" v-if="scope.row.type==='dir'" @click="delDir(scope.row.path)">删除</el-button>
                    <el-button size="mini" plain type="success" v-if="scope.row.type==='file'" @click="fileDownLoad(scope.row.path)">下载</el-button>
                    <el-button size="mini" plain type="danger" v-if="scope.row.type==='file'" @click="delFile(scope.row.path)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</div>

<script>
    new Vue({
        el: "#home",
        data: {
            upFileList: [],
            fileList: [],
            toUpload: false,
            backSteps: [],
            absolutePath: "",
            relativePath: "",
            backPath: ""
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            toUpload: function () {
                var that = this;
                that.into(that.relativePath);
            }
        },
        mounted: function () {
            window.addEventListener('keydown', this.handleKeyDown);
            String.prototype.endWith = function (endStr) {
                var d = this.length - endStr.length;
                return (d >= 0 && this.lastIndexOf(endStr) === d)
            };
            var that = this;
            lyb.ajax("/file/getRootFileList", {}, function (rs) {
                that.fileList = rs.rs;
                that.absolutePath = rs.absolutePath;
                that.relativePath = rs.relativePath;
            });
            $(".header").sticky({topSpacing: 0});
        },
        methods: {
            newPackage: function () {
                var that = this;
                this.$prompt('请输入文件夹名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function (value) {
                    lyb.ajax("/file/newPackage", {path: that.relativePath, name: value["value"]}, function (rs) {
                        that.into(that.relativePath)
                    })
                })
            },
            into: function (path) {
                var that = this;
                lyb.ajax("/file/getFileList", {path: path}, function (rs) {
                    that.fileList = rs.rs;
                    that.absolutePath = rs.absolutePath;
                    that.relativePath = rs.relativePath;
                    that.backPath = rs.backPath;
                });
            },
            fileDownLoad: function (path) {
                var url = "/file/download";//下载文件url
                $("#fileForm").attr('action', url);
                $("#fileForm input").val(path);
                $("#fileForm").submit();
            },
            delFile: function (path) {
                var that = this;
                that.$confirm('此操作将用就删除该文件，是否继续？','警告！！',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    lyb.ajax("/file/delFile", {path: path}, function (rs) {
                        that.into(that.relativePath);
                    });
                });
            },
            delDir: function (path) {
                var that = this;
                that.$confirm('此操作将用就删除该目录以及下面的所有文件，是否继续？','警告！！',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    lyb.ajax("/file/delDir", {path: path}, function (rs) {
                        that.into(that.relativePath);
                    });
                });
            },
            handleKeyDown(event) {
                this.into(this.backPath)
            },
            submitUpload: function () {
                this.$refs.upload.submit();
            },
            handleSuccess: function (file) {
                this.$message({message: '上传文件成功', type: 'success'});
            },
            handleRemove: function (file, fileList) {
            },
            handlePreview: function (file) {
            },
            iCellStyle:function () {
                return 'padding: 3px 0;';
            }
        }
    })
</script>
</body>
</html>
